// 代码压缩
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
//nodejs path模块
const path = require("path");

// gzip压缩
const CompressionWebpackPlugin = require("compression-webpack-plugin");

// 是否为生产环境
const isProduction = process.env.NODE_ENV !== "development";

module.exports = {
  productionSourceMap: false,
  // 指定构建后的输出目录，默认 'dist'
  outputDir: "dist",
  devServer: {
    open: true,
    port: 3000,
  },
  chainWebpack: (config) => {
    // ============压缩图片 start============
    config.module
      .rule("images")
      .use("image-webpack-loader")
      .loader("image-webpack-loader")
      .options({ bypassOnDebug: true })
      .end();
    // ============压缩图片 end============

    // ============注入cdn start============
    config.plugin("html").tap((args) => {
      args[0].title="自动化报表"
      return args;
    });
    // ============注入cdn start============
  },
  configureWebpack: (config) => {
    // 配置Webpack模块解析的方式，使得你可以通过模块名字而不是相对路径来引入模块
    config.resolve = {
      // 设置路径别名
      extensions: ['.js', '.vue', '.json','.jsx','.scss'],//导入时省略文件后缀名
      alias: {
        "@": path.resolve("src"),
        "@public": path.resolve("public"),
        "@imges": path.resolve("src/assets/images"),
        "@audio": path.resolve("src/assets/audio"),
        "@scss": path.resolve("src/assets/scss"),
        "@video": path.resolve("src/assets/video"),
      },
    };
    // 生产环境相关配置
    if (isProduction) {
      // 代码压缩
      //   config.plugins.push(
      //     new UglifyJsPlugin({
      //       uglifyOptions: {
      //         //生产环境自动删除console
      //         compress: {
      //           //   warnings: false, // 若打包错误，则注释这行,但是没用貌似会报错，js/manifest.211ac09a.js from UglifyJs`warnings` is not a supported option
      //           drop_debugger: true,
      //           drop_console: true,
      //           pure_funcs: ["console.log"],
      //         },
      //       },
      //       sourceMap: false,
      //       parallel: true,
      //     })
      //   );

      // gzip压缩
      const productionGzipExtensions = ["html", "js", "css"];
      config.plugins.push(
        new CompressionWebpackPlugin({
          filename: "[path][base].gz",
          algorithm: "gzip",
          test: new RegExp("\\.(" + productionGzipExtensions.join("|") + ")$"),
          threshold: 10240, // 只有大小大于该值的资源会被处理 10240
          minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
          deleteOriginalAssets: false, // 删除原文件
        })
      );
      // 公共代码抽离
      config.optimization = {
        splitChunks: {
          cacheGroups: {
            vendor: {
              chunks: "all",
              test: /node_modules/,
              name: "vendor",
              minChunks: 1,
              maxInitialRequests: 5,
              minSize: 0,
              priority: 100,
            },
            common: {
              chunks: "all",
              test: /[\\/]src[\\/]js[\\/]/,
              name: "common",
              minChunks: 2,
              maxInitialRequests: 5,
              minSize: 0,
              priority: 60,
            },
            styles: {
              name: "styles",
              test: /\.(sa|sc|c)ss$/,
              chunks: "all",
              enforce: true,
            },
            runtimeChunk: {
              name: "manifest",
            },
          },
        },
      };
    }
  },
};
